import React, { useRef, useState, useEffect } from 'react';
import { message, Form, Select, TreeSelect, Radio } from 'antd';
import { DrawerForm, ProFormText } from '@ant-design/pro-form';
import { SettingOutlined } from '@ant-design/icons';
import { updateCharge } from '@/api/charge';

export default ({ data, refresh }: any) => {
  const {
    id,
    licenceNo,
    shopName,
    idCard,
    status,
    email,
    tel,
    address,
    managerName,
    idCardImg,
  } = data;
  // console.log(data);

  useEffect(() => {}, []);

  const formRef = useRef();
  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      width={450}
      title="修改用户"
      formRef={formRef}
      trigger={<SettingOutlined style={{ color: 'rgb(64,169,255)' }} />}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        // console.log(values);
        let res = await updateCharge({ ...values, id });
        // console.log(res);
        refresh();
        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
      initialValues={{
        shopName,
        email,
        tel,
        idCard,
        managerName,
        status,
        address,
      }}
    >
      <ProFormText
        name="shopName"
        width="md"
        label="充电站名称"
        tooltip="最少4位"
      />
      <ProFormText name="tel" width="md" label="电话" />
      <ProFormText name="address" width="md" label="地址" />
      <ProFormText name="managerName" width="md" label="负责人" />

      <Form.Item
        label="状态"
        name="status"
        rules={[
          {
            required: true,
            message: '请选择状态!',
          },
        ]}
      >
        <Radio.Group>
          <Radio value="通过">通过</Radio>
          <Radio value="驳回">驳回</Radio>
          <Radio value="同意">同意</Radio>
          <Radio value="拒绝">拒绝</Radio>
        </Radio.Group>
      </Form.Item>
    </DrawerForm>
  );
};
